import React, {Component} from 'react';
import {StyleSheet, View, Text, BackHandler} from 'react-native';
import {QRScannerView} from 'react-native-qrcode-scanner-view';

type Props = {};

export default class Scanner extends Component<Props> {
  renderTitleBar = () => (
    <Text style={{color: 'white', textAlign: 'center', padding: 16}} />
  );

  renderMenu = () => (
    <Text style={{color: 'white', textAlign: 'center', padding: 16}} />
  );

  render() {
    return (
      <View style={styles.container}>
        <QRScannerView
          onScanResult={this.onBarCodeRead}
          renderHeaderView={this.renderTitleBar}
          renderFooterView={this.renderMenu}
          scanBarAnimateReverse={true}
        />
      </View>
    );
  }
  // componentDidMount() {
  //   BackHandler.addEventListener(
  //     'hardwareBackPress',
  //     this.onBackButtonPressAndroid,
  //   );
  // }
  // componentWillUnmount() {
  //   BackHandler.removeEventListener(
  //     'hardwareBackPress',
  //     this.onBackButtonPressAndroid,
  //   );
  // }

  // onBackButtonPressAndroid = () => {
  //   this.props.navigation.goBack();
  // };
  onBarCodeRead = (data) => {
    this.props.route.params.callback(data);
    this.props.navigation.goBack();
  };
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'black',
  },
});
